<template>
	<view class="bg-white px-15px pt-1px pb-15px attribute">
		<view class="pt-15px">
			<el-select :disabled="!currentItem.type" v-model="currentItem.type" placeholder="组件类型">
				<el-option-group v-for="(group, groupIndex) in componentList" :key="groupIndex" :label="group.label">
					<el-option v-for="(item, index) in group.list" :key="index" :label="item.title" :value="item.name" />
				</el-option-group>
			</el-select>
		</view>
		<el-divider content-position="left">基础属性</el-divider>
		<view class="label mb-10px">数据格式</view>
		<el-select :disabled="!currentItem.type" v-model="currentItem.attrs.type" placeholder="请选择数据格式">
			<el-option label="string" value="string"></el-option>
			<el-option label="number" value="number"></el-option>
			<el-option label="object" value="object"></el-option>
			<el-option label="array" value="array"></el-option>
			<el-option label="boolean" value="boolean"></el-option>
		</el-select>
		<view class="label my-10px">字段名称</view>
		<el-input :disabled="!currentItem.type" v-model="currentItem.name" placeholder="请输入字段名称" clearable></el-input>
		<view class="label my-10px">字段标题</view>
		<el-input :disabled="!currentItem.attrs.type" v-model="currentItem.title" placeholder="请输入字段标题" clearable></el-input>
		<!--  -->
		<el-divider content-position="left">表单属性</el-divider>
		<view class="label my-10px">默认值</view>
		<el-input :disabled="!currentItem.type" v-model="currentItem.attrs.value" placeholder="请输入字段默认值" clearable></el-input>
		<view class="label my-10px">是否清空数据</view>
		<el-switch v-model="currentItem.form.clearable"></el-switch>
		<template v-if="currentItem.type === 'dx-upload'">
			<view class="label my-10px">图片上传数量</view>
			<el-input v-model="currentItem.form.upload_max" placeholder="请输入图片上传数量" clearable></el-input>
		</template>
		<!-- 单选，复选，下拉 -->
		<template v-if="['radio', 'checkbox', 'select'].includes(currentItem.type)">
			<template v-if="currentItem.item === 'select'">
				<view class="label my-10px">是否多选</view>
				<el-switch v-model="currentItem.form.multiple"></el-switch>
			</template>
			<view class="label my-10px">选项</view>
			<view class="flex items-center">
				<view class="flex-1">键(label)</view>
				<view class="flex-1">值(value)</view>
				<el-button type="primary" class="btn" size="small" @click="addOption">添加</el-button>
			</view>
			<view class="flex items-center mt-8px" v-for="(item, index) in currentItem.form.options" :key="index">
				<el-input placeholder="请输入键" v-model="item.label"></el-input>
				<el-input class="mx-5px" placeholder="请输入值" v-model="item.value"></el-input>
				<el-button class="btn" type="danger" size="small" @click="removeOption(index)">移除</el-button>
			</view>
		</template>
		<!-- 数字加减 -->
		<template v-if="currentItem.type === 'el-input-number'">
			<view class="label my-10px">计数器步长</view>
			<el-input v-model="currentItem.form.step" type="number" placeholder="请输入计数器步长" clearable></el-input>
			<view class="label my-10px">允许的最小值</view>
			<el-input v-model="currentItem.form.min" type="number" placeholder="请输入允许的最小值" clearable></el-input>
			<view class="label my-10px">允许的最大值</view>
			<el-input v-model="currentItem.form.max" type="number" placeholder="请输入允许的最小值" clearable></el-input>
		</template>
		<!-- 日期组件 -->
		<template v-if="currentItem.type === 'date'">
			<view class="label my-10px">日期显示类型</view>
			<el-select v-model="currentItem.form.dateMode" placeholder="请选择日期显示类型">
				<el-option label="日期" value="date"></el-option>
				<el-option label="日期时间" value="datetime"></el-option>
				<el-option label="年" value="year"></el-option>
				<el-option label="月" value="month"></el-option>
				<el-option label="周" value="week"></el-option>
				<el-option label="时间" value="time"></el-option>
				<el-option label="月范围" value="monthrange"></el-option>
				<el-option label="日期范围" value="daterange"></el-option>
				<el-option label="日期时间范围" value="datetimerange"></el-option>
				<el-option label="日期多选" value="dates"></el-option>
			</el-select>
		</template>
		<!-- 时间 -->
		<template v-if="currentItem.type === 'time'">
			<view class="label my-10px">是否为时间范围选择</view>
			<el-switch v-model="currentItem.form.isRange"></el-switch>
		</template>
		<view class="label my-10px">校验规则</view>
		<el-select v-model="currentItem.form.rules" placeholder="请选择校验规则" multiple clearable>
			<el-option label="必填" value="required"></el-option>
			<el-option label="手机号码" value="mobile"></el-option>
			<el-option label="邮箱地址" value="email"></el-option>
		</el-select>
		<!--  -->
		<el-divider content-position="left">表格属性</el-divider>
		<view class="label my-10px">是否搜索</view>
		<el-switch v-model="currentItem.table.operator"></el-switch>
		<view class="label my-10px">是否展示</view>
		<el-switch v-model="currentItem.table.visible"></el-switch>
		<view class="label my-10px">最小宽度</view>
		<el-input v-model="currentItem.table.minWidth" placeholder="请输入最小宽度" clearable></el-input>
		<!-- 格式化 -->
		<view class="label my-10px">自定义格式化</view>
		<el-select v-model="currentItem.table.formatter" placeholder="请选择自定义渲染" clearable>
			<el-option label="日期时间" value="dxFormatDate"></el-option>
		</el-select>
		<!-- <view class="label my-10px">自定义渲染</view>		 -->
	</view>
</template>
<script setup lang="ts" name="dxAttribute">
import { ref } from 'vue';
import { componentList } from './useCrud';
import { watch } from 'vue';

const props = defineProps<{
	currentItem: any;
}>();
console.log(props.currentItem);
watch(
	() => props.currentItem.type,
	(val) => {
		console.log(val);
		switch (val) {
			case 'number':
			case 'el-input-number':
			case 'date':
			case 'time':
				props.currentItem.attrs.type = 'number';
				break;
			case 'switch':
				props.currentItem.attrs.type = 'boolean';
				break;
			case 'radio':
			case 'checkbox':
			case 'select':
			case 'dx-array':
			case 'dx-city-select':
				props.currentItem.attrs.type = 'array';
				break;
			default:
				props.currentItem.attrs.type = 'string';
				break;
		}
	}
);
function addOption() {
	props.currentItem.form.options.push({
		label: '',
		value: '',
	});
}
function removeOption(index: number) {
	props.currentItem.form.options.splice(index, 1);
}
</script>
<style lang="scss" scoped>
::v-deep {
	.el-select {
		width: 100%;
	}
}
.label {
	font-size: 14px;
	color: var(--el-text-color-regular);
}
.attribute {
	.btn {
		padding: 14px 8px !important;
	}
}
</style>
